<template>
  <div class="partystanding">
    <title-middle title="党龄分布"></title-middle>
    <div class="bottom">
      <div class="pieEchart" ref="pieEchart"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
const echarts = inject('echarts')
let pieEchart = ref(null)
let myEchart = null
let color1 = [
  'rgba(0, 198, 253, 1)',
  'rgba(255, 178, 0, 1)',
  'rgba(241, 254, 14, 1)',
  'rgba(255, 83, 60, 1)'
]
let color2 = [
  'rgba(0, 198, 253, 0.1)',
  'rgba(255, 178, 0,0.1)',
  'rgba(241, 254, 14,0.1)',
  'rgba(255, 83, 60,0.1)'
]
let pieData = [
  { name: 'xxxx', value: 40 },
  { name: 'xxxx', value: 10 },
  { name: 'xxxx', value: 25 },
  { name: 'xxxxx', value: 25 }
]

onMounted(() => {
  setPieEchart()
})
const setPieEchart = () => {
  let data1 = []
  let data2 = []
  pieData.forEach((item, index) => {
    data1.push({
      name: item.name,
      value: item.value,
      itemStyle: { color: color1[index] },
      label: { color: color1[index] }
    })
    data2.push({
      name: item.name,
      value: item.value,
      itemStyle: { color: color2[index] },
      label: { color: color2[index] }
    })
  })
  if (myEchart != null && myEchart != '' && myEchart != undefined) {
    myEchart.dispose() //销毁
  }
  myEchart = echarts.init(pieEchart.value, null, { renderer: 'svg' })
  let option = {
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: 16 // 字体大小
      }
    },
    legend: {
      top: '6%',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    series: [
      {
        type: 'pie',
        center: ['46.5%', '50.5%'], //修改圆心位置
        radius: ['40%', '50%'], ////设置饼图默认的展开样式
        label: {
          formatter: (param) => {
            return `{b|${Math.round(param.percent) + '%'}}\n{d|${param.name.slice(
              0,
              4
            )}\n${param.name.slice(4)}}`
          },
          rich: {
            b: {
              fontSize: 25
            },
            d: {
              fontSize: 18
            }
          }
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 15,
          smooth: false,
          minTurnAngle: 90,
          maxSurfaceAngle: 90
        },
        itemStyle: {
          borderRadius: 5,
          borderWidth: 5
        },
        emphasis: {
          itemStyle: {
            borderWidth: 0,
            shadowBlur: 2,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          hoverAnimation: false
        },
        data: data1
      },
      {
        // name: 'Access From',
        type: 'pie',
        radius: ['30%', '40%'],
        center: ['46.5%', '50.5%'], //修改圆心位置
        avoidLabelOverlap: false,
        label: {
          show: false //隐藏标示文字
        },
        labelLine: {
          show: false //隐藏标示线
        },
        tooltip: {
          show: false,
          trigger: 'none'
        },
        data: data2
      }
    ]
  }
  myEchart.setOption(option)
}
</script>
<style scoped lang="scss">
.partystanding {
  .bottom {
    width: 203px;
    height: 200px;
    box-sizing: border-box;
    background: url('@/assets/images/thirdpage/pieBg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    transform: translate(40px, 110px);
    .pieEchart {
      width: 400px;
      height: 400px;
      position: absolute;
      //   background-color: red;
      top: -104px;
      left: -86px;
    }
  }
}
</style>
